<template>
    <view class="content">
        <up-sticky bgColor="#fff">
            <up-tabs ref="tabsRef" :current="current" :list="list" :scrollable="false" lineColor="#F6D56C" :activeStyle="{
            color: '#F6D56C',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;width:100%"
                @change="onTabChange"></up-tabs>
        </up-sticky>
        <view class="list-wrap">
            <view class="list-wrap-item" item v-for="(item, index) in fetchList" :key="index"
                @click="toPage(`/pages/mine/order-detail?info=${JSON.stringify(item)}`)">
                <view class="list-wrap-item-status_text">{{ item.workType==1?'全职':'兼职' }}</view>
                <view class="list-wrap-item-title">{{ item.workItemName }}</view>
                <view class="list-wrap-item-title">订单号:{{ item.no }}</view>
                <view class="list-wrap-item-title">工作人数:{{ item.workNum }}</view>
                <view class="list-wrap-item-title">订单金额:{{ item.amount }}</view>
                <view class="list-wrap-item-title">工作时间段:{{ item.startTime+'~'+item.endTime }}</view>

                <view class="list-wrap-item-info">
                    <view class="list-wrap-item-info-item">
                        <view class="list-wrap-item-info-item-icon" style="background: #F6D56C;">
                            甲
                        </view>
                        <view class="list-wrap-item-info-item-name">
                            {{ item.workPartyAUserName }}
                        </view>
                    </view>
                    <view class="list-wrap-item-info-item">
                        <up-icon name="arrow-rightward"></up-icon>
                    </view>

                    <view class="list-wrap-item-info-item">
                        <view class="list-wrap-item-info-item-icon" style="background: #F6D56C;">
                            乙
                        </view>
                        <view class="list-wrap-item-info-item-name">
                            {{ item.workPartyBUserName }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const { proxy } = getCurrentInstance()

const tabsRef=ref(null)
const current=ref(0)

// 创建响应式数据  
const list = reactive([
    { name: '工作中' },
    { name: '已完成' },
]);

const fetchList = ref([])


function onTabChange(e) {
    getList(e.index)
    current.value=e.index
}
function toPage(url) {
    uni.navigateTo({ url })
}

async function getList(state = 0) {
    const res = await proxy.request('/workorder/getList', { state: state }, {
        method: 'GET'
    })
    fetchList.value = res.data.data.dataList
    console.log(fetchList.value)
}

onShow(() => {
    getList(tabsRef.value?.current)
})
</script>

<style lang="scss">
page {
    background-color: #F5F5F5;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.list-wrap {
    padding: 32rpx;
    padding-bottom: 188rpx;

    .list-wrap-item {
        position: relative;
        margin-bottom: 32rpx;
        width: 100%;
        // height: 196rpx;
        padding: 32rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        &-status_text {
            position: absolute;
            top: 0;
            right: 0;
            width: 100rpx;
            height: 50rpx;
            color: #fff;
            text-align: center;
            line-height: 50rpx;
            font-size: 28rpx;
            border-bottom-left-radius: 12rpx;
            background-color: orange;
        }

        &-title {
            width: 100%;
            height: 40rpx;
            margin-bottom: 12rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #323232;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        &-info {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 100%;
            margin-top: 20rpx;
            margin-bottom: 20rpx;

            &-item {
                &-icon {
                    width: 80rpx;
                    height: 80rpx;
                    color: #fff;
                    text-align: center;
                    line-height: 80rpx;
                    border-radius: 50%;
                }

                &-name {
                    margin-top: 20rpx;
                    text-align: center;
                }
            }
        }
    }
}
</style>